<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熊猫优选首页</title>
    <!-- 引入重置样式表 reset.css -->
    <link rel="stylesheet" href="../lib/css/reset.css">
    <!-- 引入字体图标样式表 iconfont.css -->
    <link rel="stylesheet" href="../static/fonts/iconfont.css">
    <!-- 引入公共样式表 common.css-->
    <link rel="stylesheet" href="../css/common.css">
    <!-- 引入首页样式表 register.css -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 引入轮播css -->
    <link rel="stylesheet" href="../lib/css/swiper-bundle.min.css">

</head>

<body>
    <!-- 顶部搜索栏 -->

    <div id="header">
        <div class="container clearfix">
            <img src="../static/images/logo.png" alt="熊猫优选logo">
            <div class="panda">
                <h2>熊猫优选</h2>
                <p>XIONG MAO YOU XUAN</p>
            </div>


            <!-- 中间搜索框 -->
            <div class="search">
                <input type="text" placeholder="搜索商品，发现更多优惠" name="search">
                <span class="iconfont icon-bendisousu"></span>
                <div class="go">搜索</div>
            </div>

            <!-- 右边品质+购物车入口 -->
            <div class="shopRelevent fr">
                <ul class="shop">
                    <li><span class="iconfont icon-99yuanbaoyou text"></span> <br> 全程包邮</li>
                    <li><span class="iconfont icon-7tiantuihuan text"></span> <br> 七天退化</li>
                    <li><span class="iconfont icon-shenqingchenggonggougouicon text"></span> <br> 品质保证</li>
                    <li><span class="iconfont icon-gouwucheman text cart"></span> <br> 查看购物车 </li>
                </ul>

            </div>
            <!-- 登录提示 -->
            <p class="fr login">
                <span>尚未登录</span>
                <span class="logOut">退出登录</span>
                <span> <a href="./register.html">免费注册</a> </span>
            </p>
        </div>
    </div>

    <!-- 导航栏 -->
    <div id="nav">
        <ul class="container clearfix">
            <li onclick="toIndex()">首页</li>
            <li onclick="loadCatagory()">9.9包邮</li>
            <li onclick="toFavor()">超值大额券</li>
            <li>降温急救穿搭</li>
        </ul>
    </div>

    <!-- 主体区域 -->

    <div id="main" class="container clearfix">

        <!-- 左边详细分类 -->
        <ul class="class fl">
            <li><span class="iconfont icon-nvzhuang"></span><a href="#">女装/女鞋</a></li>
            <li><span class="iconfont icon-tebutubiao-xianxing_lanqiuxie
                "></span><a href="#">男装/男鞋</a></li>
            <li><span class="iconfont icon-kouhong"></span><a href="#">美妆/个护</a></li>
            <li><span class="iconfont icon-shoutibao"></span><a href="#">配饰/箱包</a></li>
            <li><span class="iconfont icon-lingshi"></span><a href="#">零食王国</a></li>
            <li><span class="iconfont icon-naiping
                "></span><a href="#">母婴用品</a></li>
            <li><span class="iconfont icon-shouji"></span><a href="#">手机/数码</a></li>
            <li><span class="iconfont icon-neiyi"></span><a href="#">内衣袜子</a></li>
            <li><span class="iconfont icon-shafa
                "></span><a href="#">文娱/家居</a></li>
        </ul>

        <!-- 详细分类的二级菜单 -->
        <ol class="secondMenu">
            <!-- 动态 -->
        </ol>

        <!-- 轮播区域 -->
        <div class="fl clearfix banner">
            <!-- <div class="swiper fl clearfix"> -->
                <!-- <ul class="fl leftBox">
                  
                </ul>
                <div class="fl rightBox">
                </div> -->

                <!-- <div class="swiper-wrapper"> -->
                <!-- 动态渲染bannber -->
                <!-- </div> -->
                <!-- 如果需要分页器 -->
                <!-- <div class="swiper-pagination"></div> -->
                <!-- 如果需要导航按钮 -->
                <!-- <div class="swiper-button-prev"></div> -->
                <!-- <div class="swiper-button-next"></div> -->
            <!-- </div> -->

            <!-- 9.9包邮 -->
        </div>
        <div class="shoes fr">
            <p>9块9包邮</p>
            <img src="../static/images/arrow.png" alt="">
            <img src="../static/images/shoes.gif" alt="">

        </div>


        <!-- 优惠券 -->
        <div class="favor clearfix">
            <div class="clearfix">
                <h2>降温急救穿搭</h2>
                <img src="../static/images/clothes.webp" alt="" class="fr">
                <p> 速来抢购~</p>
                <span>Go</span>
            </div>

            <div class="clearfix">
                <h2>超值大额券</h2>
                <img src="../static/images/favor.webp" alt="" class="fr">
                <p> 优惠直击低价~</p>
                <span>Go</span>
            </div>

            <div class="clearfix">
                <h2>扫码下载APP</h2>
                <img src="../static/images/code.png" alt="" class="fr">
                <p> 发现更多惊喜~</p>

                <span>Go</span>
            </div>
        </div>


        <!-- 每日更新 -->
        <div id="dailyLoad">
            <span>小编精选</span>
            <span><a href="#">每日更新</a></span>
        </div>

        <!-- 商品列表 -->
        <div id="list">
            <ul class="container clearfix">
                <!-- 动态渲染页面 -->
            </ul>

            <!-- 底部加载更多 -->
            <div class="loadMore">
                加载更多
            </div>
        </div>

    </div>




    <!-- 底部版权相关 -->
    <div id="copyright">
        <div class="container clearfix">
            <img src="../static/images/logo.png" alt="" class="fl logo">
            <div class="fl text">
                <h2>熊猫优选</h2>
                <p>年轻人网购首选</p>
                <p>购物领券更省钱</p>
            </div>

            <p class="download"><a href="http://www.xiongmaoyouxuan.com/#/downLoad">| 下载App</a></p>
            <p class="rights"><img src="../static/images/policeIcon.webp" alt="">浙公安网备案33010602009949号<img
                    src="../static/images/license.webp" alt="">ICP备案号:浙lCP备17012864号-1</p>
        </div>
    </div>

    <div id="aside">
        <img src="../static/images/backTop.png" alt="返回顶部">
    </div>
    <!-- jq -->
    <script src="../lib/js/jquery-3.6.0.js"></script>
    <!-- axios -->
    <script src="../lib/js/axios.min.js"></script>
   
    <!-- 公共 -->
    <script src="../js/common.js"></script>
    <!-- 首页 -->
    <script src="../js/index.js"></script>
     <!-- 轮播 -->
     <script src="../lib/js/swiper-bundle.min.js" class="toNull"></script>
</body>

</html>